<!-- 
CSS

前端目前CSS方案主要有: 传统的CSS文件  原子化CSS  CSS in JS(React的styled-components库)


🧊浏览器渲染原理
一、解析 html树 css树
二、从父元素开始渲染
三、css样式
1、样式声明（找用户样式表/浏览器默认样式表，没有冲突的，先声明）
2、有冲突就做计算层叠（权重计算）
      - 比较重要性（自己/浏览器）
      - 比较特殊性（权重值比较）
      - 比较书写顺序（后来居上）
3、从父元素继承
4、赋予默认值


🧊动画/过渡/变形
transform: 对内联元素可能无效


🧊字体属性
font-size: clamp(1.125rem,2vw,1.25rem) 可用的字体最小值到最大值 2vm是百分之二的视口大小



🧊图片/创意
径向渐变 /*75%结束白色,75%开始黑色,所以是硬过渡*/
background-image: radial-gradient(circle at 100%, #333 60%,white 75%,#333 75%); 
线性渐变 
background-image:linear-gradient(0deg, rgba(161, 140, 209, 50%) 0%, rgba(251, 194, 235,40%) 100%), linear-gradient(90deg, rgba(161, 140, 209,50%) 0%, rgba(251, 194, 235,40%) 100%);
//其中一种渐变转换90度可以两个长方形组合变成很多小方块
background-size: 80px 80px;




🧊Flex
容器:
flex-direction
justify-content/align-items(默认值:stretch, 控制主轴和交叉轴对齐方式,单行生效)   
justify-items (控制子项在单元格中的水平对齐方式)
align-content(多行生效,即对flex-wrap: nowrap才会生效)
flex-wrap: nowrap(默认) |  wrap  | wrap-reverse;

子容器:
flex-grow(默认值:0)
flex-shrink(默认值:1)
flex-basis(不设置为auto,优先级最高。如果设置成默认值:auto,会直接使用width值,如果不设置width,默认值就是max-content内容宽度,如果超出容器就是min-content)

flex:auto => flex:1 1 auto   
flex:1    => flex:1 1 0%
flex:2    => flex:2 1 0%
flex:1 1  => flex:1 1 0%     (flex-grow | flex-shrink)
flex:1 30px => flex:1 1 30px (flex-grow | flex-basis)


align-self    //单独设置交叉轴对齐方式
justify-self  //单独设置主轴对齐方式
order

将align-items设为 flex-start,或者align-items属性的其他值都可以,子项就会保持其自身的高度了。






🧊Grid(网格布局)
容器:
grid-template-columns: 50px 50px | repeat(2,50px) | 1fr 1fr |  repeat(auto-fill,minmax(50px,1fr))
grid-template-rows: 50px 100px (设置第一行和第二行高度)
  -grid-auto-rows: 100px (统一设置高度)
gap: 5px 10px  (row-gap/column-gap)

areas: /eəriəz/
grid-template-areas: " 
   header header header
   content1 content2 content2
   footer footer footer
"






子容器:
grid-column: 1/2
  -grid-column-start: 1
  -grid-column-end: 2
grid-row: 2/3
  -grid-row-start: 2
  -grid-row-end: 3

grid-areas: header
grid-areas: content1
grid-areas: content2
grid-areas: footer








🧊BFC:一个隔离的独立容器,容器里面的子元素不会影响到外面的元素
  - BFC计算高度的时候,会把浮动元素的高度也计算进来
  - 浮动盒不会叠加到BFC上






🧊外边距折叠(因为嵌套也属于贴边相邻,所以子元素的margin会覆盖父元素margin)
·父元素设置padding-top/border-top(因为可以隔开margin)
·触发BFC(块级格式化上下文)  
  - 根元素
  - display: flow-root/flex/grid  |  inline-flex/inline-grid/inline-block
  - overflow: auto/scroll/hidden...(除了visible)
  - position: absolute/fixed
  - float: left/right (记得设置宽度)
  
 


🧊box-sizing:border-box(高度包括padding和border)/content-box

-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC</title>
</head>
<style>

    .box1{
       height: 500px;
       background-color: aquamarine;
       display: flow-root; /*创建BFC*/
    }

    .box2{
        border:10px solid #ccc;
        height: 200px;
        background-color: blueviolet;
        margin-top: 100px;
    }
</style>
<body>

    <div class="box1">
        <div class="box2"> 
             Child-box
        </div>
    </div>
    
</body>
</html>